:root {
    --vscode-overlay-background: rgba(0, 0, 0, 0.5);
    --vscode-modal-background: var(--vscode-sideBar-background);
}

/*
    Root element which only exists to use container query
    for changing header tabs layout.
*/
.tabs-root {
    container-type: inline-size;
    container-name: tabs-container;
}

.tabs-container {
    display: flex;
    justify-content: space-between;
    position: sticky;
    padding: 0 8px;
    border-bottom: 1px solid var(--vscode-dropdown-border);
    background-color: var(--vscode-sideBar-background);
}

.tabs {
    display: flex;
    flex-shrink: 0;
    gap: 2px;

    & > * {
        flex-shrink: 0;
    }
}

.sub-tabs {
    display: flex;
    flex-shrink: 0;
    gap: 8px;

    & > * {
        flex-shrink: 0;
    }
}

.tab-action-label {
    display: inline;
}

/*
    By default if we have enough space we render tabs and its
    sub action tabs in one row but if we don't have enough space
    which currently is just static value we switch to two rows
    layout (one for tab and one below for sub-actions)
 */
@container tabs-container (width < 750px) {
    .tabs-container {
        padding: 0;
        flex-direction: column;
    }

    .tabs {
        padding: 0 8px;
        border-bottom: 1px solid var(--vscode-dropdown-border);
    }

    .sub-tabs {
        padding: 0 8px;
    }
}

/*
    For small container turn off tabs labels completely and go back
    to one row layout for tabs and its sub actions
*/
@container tabs-container (width < 475px) {
    .tab-action-label {
        display: none;
    }

    .tabs-container {
        padding: 0 8px;
        flex-direction: row;
    }

    .tabs {
        padding: 0;
        border-bottom: none;
    }

    .sub-tabs {
        padding: 0;
    }
}

.dialog {
    &-overlay {
        inset: 0;
        position: fixed;
        background-color: var(--vscode-overlay-background);
    }

    &-content {
        width: 90vw;
        max-width: 450px;
        max-height: 85vh;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 25px;

        border-radius: 6px;
        background-color: var(--vscode-modal-background);
        box-shadow: hsl(206 22% 7% / 35%) 0 10px 38px -10px, hsl(206 22% 7% / 20%) 0 10px 20px -15px;

        &:focus {
            outline: none;
        }
    }

    &-title {
        margin: 0;
        font-weight: 500;
        font-size: 17px;
    }

    &-description {
        margin: 10px 0 20px;
        font-size: 15px;
        line-height: 1.5;
    }

    &-footer {
        margin-top: 1.5rem;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
    }
}
